import React, { Component } from 'react';
import { Card, Button } from 'antd';
import { SearchOutlined, PoweroffOutlined } from '@ant-design/icons';

import './ui.less';

class Buttons extends Component {
	state = {
		loadings: [],
	};
	enterLoading = index => {
		this.setState(({ loadings }) => {
		    const newLoadings = [...loadings];
		    newLoadings[index] = true;

		    return {
			    loadings: newLoadings,
		    };
		});
		setTimeout(() => {
		    this.setState(({ loadings }) => {
			    const newLoadings = [...loadings];
			    newLoadings[index] = false;

			    return {
			        loadings: newLoadings,
			    };
		    });
		}, 6000);
	};
	render(){
		const { loadings } = this.state;
		return (
			<div>
				<Card title="基础按钮" className="card-wrap">
					<Button type="primary">主要按钮</Button>
					<Button>次要按钮</Button>
					<Button type="dashed">dashed</Button>
					<Button type="danger">danger</Button>
					<Button disabled>disabled</Button>
				</Card>
				<Card title="图形按钮" className="card-wrap">
					<Button type="primary" shape="circle" icon={<SearchOutlined />} />
					<Button type="primary" shape="circle">
					    A
					</Button>
					<Button type="primary" icon={<SearchOutlined />}>
					    Search
					</Button>
					<Button shape="circle" icon={<SearchOutlined />} />
				</Card>
				<Card title="Loding按钮" className="card-wrap">
					<Button type="primary" loading>
						Loading
					</Button>
					<Button type="primary" size="small" loading>
						Loading
					</Button>
					<Button type="primary" icon={<PoweroffOutlined />} loading />
					<Button type="primary"
						loading={loadings[0]} 
						onClick={() => this.enterLoading(0)}
					>
						Click me!
					</Button>
					<Button
						type="primary"
						icon={<PoweroffOutlined />}
						loading={loadings[1]}
						onClick={() => this.enterLoading(1)}
					>
						Click me!
					</Button>
				</Card>
				<Card title="按钮组">
					<Button.Group>
						<Button type="primary" icon={<SearchOutlined />} />
						<Button type="primary" >
							A
						</Button>
					</Button.Group>
				</Card>
			</div>
		)
	}
}

export default Buttons;